<template>
  <div>
    <div class="form">
      <!-- 游戏区服 -->
      <div class="form-item">
        <text class="label">游戏区服</text>
        <div class="handle" @click="showServerPicker">
          <view class="selected-tag">
            {{ `${serverTree[selectedGroupIndex].text}/${selectedServer}` || '请选择您所在的区服' }}
            <image src="../../static/icons/arrow-down.png"></image>
          </view>
        </div>
      </div>

      <!-- 代练类型 -->
      <div class="form-item">
        <text class="label">陪练类型</text>
        <div class="handle" @click="showModePicker">
          <view class="selected-tag">
            {{ selectedMode || '请选择代练类型' }}
            <image src="../../static/icons/arrow-down.png"></image>
          </view>
        </div>
      </div>


      <!-- 代练任务 -->
      <div class="form-item" v-if="selectedMode != '场次' && selectedMode != '女神陪练'">
        <text class="label">代练任务</text>
        <div class="handle" @click="showCurrentTaskTypePicker">
          <view class="selected-tag">

            {{ (selectedCurrentTask === '' && selectedToTask === '') ? '请选择当前段位和目标段位' :
              `${selectedCurrentTask}-${selectedToTask}` }}
            <image src="../../static/icons/arrow-down.png"></image>
          </view>
        </div>
      </div>
      <!-- 场次选择 -->
      <div class="form-item" v-if="selectedMode == '场次'">
        <text class="label">场次选择</text>
        <div class="handle" @click="showSessionPicker">
          <view class="selected-tag">

            {{ (session === '') ? '请选择需要陪练的场次' :
              `${session}` }}
            <image src="../../static/icons/arrow-down.png"></image>
          </view>
        </div>
      </div>
      <!-- 时长选择 -->
      <div class="form-item" v-if="selectedMode == '女神陪练'">
        <text class="label">时长选择</text>
        <div class="handle" @click="showDurationPicker">
          <view class="selected-tag">

            {{ (duration === '') ? '请选择需要陪练的时长' :
              `${duration}` }}
            <image src="../../static/icons/arrow-down.png"></image>
          </view>
        </div>
      </div>
      <!-- 当前段位 -->
      <div class="form-item" v-if="selectedMode == '场次' || selectedMode == '女神陪练'">
        <text class="label">当前段位</text>
        <div class="handle" @click="showCurrentTaskTypePicker">
          <view class="selected-tag">

            {{ (selectedCurrentTask === '') ? '请选择角色当前的段位' :
              `${selectedCurrentTask}` }}
            <image src="../../static/icons/arrow-down.png"></image>
          </view>
        </div>
      </div>
    </div>

    <!-- 游戏区服选择弹窗 -->
    <uni-popup ref="serverPopup" type="bottom">
      <view class="popup-content">

        <div class="top">
          请选择游戏区服
        </div>
        <div class="body">
          <!-- 左侧导航栏 -->
          <scroll-view scroll-y class="popup-nav">
            <view v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
              :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
              {{ group.text }}
            </view>
          </scroll-view>

          <!-- 右侧选择内容 -->
          <scroll-view scroll-y class="popup-scroll">
            <view v-if="selectedGroupIndex !== null" class="popup-group">
              <view v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                class="popup-item" @click="selectServerItem(item)">
                {{ item.text }}
              </view>
            </view>
            <view v-else class="popup-empty">请选择左侧分类</view>
          </scroll-view>
        </div>
      </view>
    </uni-popup>

    <!-- 代练类型选择弹窗 -->
    <uni-popup ref="modePopup" type="bottom">
      <view class="popup-content">
        <scroll-view scroll-y class="popup-scroll">
          <view v-for="(item, index) in modeTree" :key="index" class="popup-item" @click="selectModeItem(item)">
            {{ item.text }}
          </view>
        </scroll-view>
        <view class="popup-footer" @click="hideModePicker">取消</view>
      </view>
    </uni-popup>

    <!-- 时长选择器弹窗 -->
    <uni-popup ref="durationPopup" type="bottom">
      <view class="popup-content">
        <scroll-view scroll-y class="popup-scroll">
          <view v-for="(item, index) in durationTree" :key="index" class="popup-item" @click="selectDurationItem(item)">
            {{ item.text }}
          </view>
        </scroll-view>
        <view class="popup-footer" @click="hideDurationPicker">取消
        </view>
      </view>
    </uni-popup>
    <!-- 场次选择器弹窗 -->
    <uni-popup ref="sessionPopup" type="bottom">
      <view class="popup-content">
        <scroll-view scroll-y class="popup-scroll">
          <view v-for="(item, index) in sessionTree" :key="index" class="popup-item" @click="selectSessionItem(item)">
            {{ item.text }}
          </view>
        </scroll-view>
        <view class="popup-footer" @click="hideSessionPicker">取消
        </view>
      </view>
    </uni-popup>

    <!-- 当前段位选择弹窗 -->
    <uni-popup ref="currentTaskTypePopup" type="bottom">
      <view class="popup-content">

        <div class="top">
          请选择当前段位
        </div>
        <div class="body">
          <!-- 左侧导航栏 -->
          <scroll-view scroll-y class="popup-nav">
            <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
              :class="{ active: selectedCurrentTaskGroupIndex === groupIndex }"
              @click="selectCurrentTaskGroup(groupIndex)">
              {{ group.text }}
            </view>
          </scroll-view>

          <!-- 右侧选择内容 -->
          <scroll-view scroll-y class="popup-scroll">
            <view v-if="selectedCurrentTaskGroupIndex !== null" class="popup-group">
              <view v-for="(item, itemIndex) in Task[selectedCurrentTaskGroupIndex].children" :key="itemIndex"
                class="popup-item">
                <div class="popup-item-title">{{ item.text }}</div>
                <div class="popup-item-body">
                  <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                    @click="selectCurrentTaskItem(item.text, item2.text)" class="popup-item-body-item">
                    <span>{{ item2.text }}</span>
                  </view>
                </div>
              </view>
            </view>
            <view v-else class="popup-empty">请选择左侧分类</view>
          </scroll-view>
        </div>
      </view>
    </uni-popup>
    <!-- 目标段位选择弹窗 -->
    <uni-popup ref="toTaskTypePopup" type="bottom">
      <view class="popup-content">

        <div class="top">
          请选择目标段位
        </div>
        <div class="body">
          <!-- 左侧导航栏 -->
          <scroll-view scroll-y class="popup-nav">
            <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
              :class="{ active: selectedToTaskGroupIndex === groupIndex }" @click="selectToTaskGroup(groupIndex)">
              {{ group.text }}
            </view>
          </scroll-view>

          <!-- 右侧选择内容 -->
          <scroll-view scroll-y class="popup-scroll">
            <view v-if="selectedToTaskGroupIndex !== null" class="popup-group">
              <view v-for="(item, itemIndex) in Task[selectedToTaskGroupIndex].children" :key="itemIndex"
                class="popup-item">
                <div class="popup-item-title">{{ item.text }}</div>
                <div class="popup-item-body">
                  <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                    @click="selectToTaskItem(item.text, item2.text)" class="popup-item-body-item">
                    <span>{{ item2.text }}</span>
                  </view>
                </div>
              </view>
            </view>
            <view v-else class="popup-empty">请选择左侧分类</view>
          </scroll-view>
        </div>
      </view>
    </uni-popup>
    <!-- 订单信息区域 -->
    <div class="orderMsg">
      <div class="pay">
        <image src="../../static/icons/pay.png"></image>
        <div class="text">建议出价 <span style="color: red;">87元</span></div>
      </div>
      <div class="time">
        <image src="../../static/icons/time.png"></image>
        <div class="text">预计时限 <span style="color: red;">47小时</span></div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <div class="tip">代练通全程为您服务</div>
      <div class="button" @click="submitOrder()">下一步</div>
    </div>
  </div>
</template>
<script>
import { onLoad } from '@dcloudio/uni-app'; // 保留 uni-app 导入

export default {
  data() {
    return {
      // 新增区服树形数据
      serverTree: [
        {
          text: '安卓QQ',
          value: "安卓QQ",
          children: [
            { text: '默认服', value: "默认服" },
            { text: '手Q抢先服', value: "手Q抢先服" },
            ...Array.from({ length: 600 }, (_, i) => ({
              text: `手Q${i + 1}区`,
              value: `手Q${i + 1}区`
            })).slice(1)
          ]
        },
        {
          text: '安卓WX',
          value: "安卓WX",
          children: [
            { text: '默认服', value: "默认服" },
            { text: '微信抢先服', value: "微信抢先服" },
            ...Array.from({ length: 600 }, (_, i) => ({
              text: `微信${i + 1}区`,
              value: `微信${i + 1}区`
            })).slice(1)
          ]
        },
        {
          text: '苹果QQ',
          value: "苹果QQ",
          children: [
            { text: '默认服', value: "默认服" },
            { text: '手Q抢先服', value: "手Q抢先服" },
            ...Array.from({ length: 600 }, (_, i) => ({
              text: `手Q${i + 1}区`,
              value: `手Q${i + 1}区`
            })).slice(1)
          ]
        },
        {
          text: '苹果WX',
          value: "苹果WX",
          children: [
            { text: '默认服', value: "默认服" },
            { text: '微信抢先服', value: "微信抢先服" },
            ...Array.from({ length: 600 }, (_, i) => ({
              text: `微信${i + 1}区`,
              value: `微信${i + 1}区`
            })).slice(1)
          ]
        },
      ],
      selectedServer: "默认服",
      selectedGroupIndex: 0, // 当前选中的导航栏索引
      modeTree: [
        {
          text: '段位',
          value: "段位"
        },
        {
          text: '场次',
          value: "场次"
        },
        {
          text: '女神陪练',
          value: "女神陪练"
        },
        // 可以添加更多代练类型
      ],
      selectedMode: "段位",
      durationTree: [
        {
          text: '2小时',
          value: "2小时"
        },
        {
          text: '3小时',
          value: "3小时"
        },
        {
          text: '4小时',
          value: "4小时"
        },
        {
          text: '5小时',
          value: "5小时"
        },
        {
          text: '6小时',
          value: "6小时"
        },
        {
          text: '7小时',
          value: "7小时"
        },
        {
          text: '8小时',
          value: "8小时"
        },
        {
          text: '9小时',
          value: "9小时"
        },
        {
          text: '10小时',
          value: "10小时"
        }
      ],
      duration: "",
      sessionTree: [
        {
          text: '1场',
          value: "1场"
        },
        {
          text: '2场',
          value: "2场"
        },
        {
          text: '3场',
          value: "3场"
        },
        {
          text: '4场',
          value: "4场"
        },
        {
          text: '5场',
          value: "5场"
        },
        {
          text: '6场',
          value: "6场"
        },
        {
          text: '7场',
          value: "7场"
        },
        {
          text: '8场',
          value: "8场"
        },
        {
          text: '9场',
          value: "9场"
        },
        {
          text: '10场',
          value: "10场"
        }
      ],
      session: "",
      Task: [],
      selectedCurrentTask: "",
      selectedCurrentTaskGroupIndex: 0, // 当前选中的导航栏索引
      selectedToTask: "",
      selectedToTaskGroupIndex: 0, // 当前选中的导航栏索引
      formData: {
        server: '',
        mode: '',
        currentTask: '',
        toTask: '',
        session: '',
        duration: '',
      },
    }
  },
  mounted() {
    this.createTaskList();
  },
  methods: {
    showServerPicker() {
      if (this.$refs && this.$refs.serverPopup) {
        console.log("serverPopup ref is ready:", this.$refs.serverPopup);
        this.$refs.serverPopup.open();
      } else {
        console.error("serverPopup ref not available yet");
      }
    },
    hideServerPicker() {
      if (this.$refs && this.$refs.serverPopup) {
        this.$refs.serverPopup.close();
      }
    },
    selectGroup(index) {
      this.selectedGroupIndex = index;
    },
    selectServerItem(item) {
      this.selectedServer = item.text;
      this.hideServerPicker();
    },
    showModePicker() {
      if (this.$refs && this.$refs.modePopup) {
        this.$refs.modePopup.open();
      } else {
        console.error("modePopup ref not available yet");
      }
    },
    hideModePicker() {
      if (this.$refs && this.$refs.modePopup) {
        this.$refs.modePopup.close();
      }
    },
    selectModeItem(item) {
      this.selectedMode = item.text;
      this.hideModePicker();
    },
    showDurationPicker() {
      if (this.$refs && this.$refs.durationPopup) {
        this.$refs.durationPopup.open();
      } else {
        console.error("durationPopup ref not available yet");
      }
    },
    hideDurationPicker() {
      if (this.$refs && this.$refs.durationPopup) {
        this.$refs.durationPopup.close();
      }
    },
    selectDurationItem(item) {
      this.duration = item.text;
      this.hideDurationPicker();
    },
    showSessionPicker() {
      if (this.$refs && this.$refs.sessionPopup) {
        this.$refs.sessionPopup.open();
      } else {
        console.error("sessionPopup ref not available yet");
      }
    },
    hideSessionPicker() {
      if (this.$refs && this.$refs.sessionPopup) {
        this.$refs.sessionPopup.close();
      }
    },
    selectSessionItem(item) {
      this.session = item.text;
      this.hideSessionPicker();
    },
    createTaskList() {
      const tiers = ['青铜', '白银', '黄金', '铂金', '钻石', '王者'];
      const taskList = []; // 用于存储生成的段位数据
      tiers.forEach(tier => {
        let tierItem = {
          text: tier,
          value: tier,
          children: []
        };
        // 从5到1生成子段位
        for (let i = 5; i >= 1; i--) {
          let subTierItem = {
            text: `${tier}${i}`,
            value: `${tier}${i}`,
            children: []
          };
          // 生成星级，固定为1星到5星
          const stars = Array.from({ length: 6 }, (_, index) => ({
            text: `${index}星`,
            value: `${index}星`
          }));
          subTierItem.children = stars;
          tierItem.children.push(subTierItem);
        }
        taskList.push(tierItem);
      });
      // 将生成的数据赋值给 Task
      this.Task = taskList;
    },
    showCurrentTaskTypePicker() {
      if (this.$refs && this.$refs.currentTaskTypePopup) {
        this.$refs.currentTaskTypePopup.open();
      } else {
        console.error("currentTaskTypePopup ref not available yet");
      }
    },
    hideCurrentTaskTypePicker() {
      if (this.$refs && this.$refs.currentTaskTypePopup) {
        this.$refs.currentTaskTypePopup.close();
      }
    },
    selectCurrentTaskGroup(index) {
      this.selectedCurrentTaskGroupIndex = index;
    },
    selectCurrentTaskItem(text1, text2) {
      this.selectedCurrentTask = `${text1} ${text2}`;
      console.log("点击了", this.selectedCurrentTask);
      this.hideCurrentTaskTypePicker();
      // 条件判断需要使用 this.
      if (this.selectedMode != '场次' && this.selectedMode != '女神陪练') {
        this.showToTaskTypePicker();
      }
    },
    showToTaskTypePicker() {
      if (this.$refs && this.$refs.toTaskTypePopup) {
        this.$refs.toTaskTypePopup.open();
      } else {
        console.error("toTaskTypePopup ref not available yet");
      }
    },
    hideToTaskTypePicker() {
      if (this.$refs && this.$refs.toTaskTypePopup) {
        this.$refs.toTaskTypePopup.close();
      }
    },
    selectToTaskGroup(index) {
      this.selectedToTaskGroupIndex = index;
    },
    selectToTaskItem(text1, text2) {
      this.selectedToTask = `${text1} ${text2}`;
      console.log(this.selectedToTask);
      this.hideToTaskTypePicker();
    },
    submitOrder() {
      // 确保从 this 访问数据
      this.formData = {
        server: `${this.serverTree[this.selectedGroupIndex].text}/${this.selectedServer}`,
        mode: this.selectedMode,
        currentTask: this.selectedCurrentTask,
        toTask: this.selectedToTask,
        session: this.session,
        duration: this.duration,
      }

      console.log("提交订单", this.formData);
      // 确保 uni 对象可用
      if (typeof uni !== 'undefined' && uni.navigateTo) {
        uni.navigateTo({
          url: `/pages/SubmitOrder/PL/WZsubmitOrder/index?formData=${JSON.stringify(this.formData)}`
        });
      } else {
        console.error("uni.navigateTo is not available");
      }
    }
  }
}
</script>
<style>
/* 表单样式 */
.form {
  width: 100%;
  background-color: #fff;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
}

.form-item {
  margin-bottom: 30rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-item .label {
  width: 30%;
  height: 100%;
  display: block;
  font-size: 28rpx;
  color: #000;
}

.form-item .handle {
  width: 70%;
}

.picker,
.input {
  width: 100%;
  height: 80rpx;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #666;
}

.selected-tag {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx;
  height: 50rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #666;
}

.selected-tag image {
  padding-left: 20rpx;
  width: 24rpx;
  height: 24rpx;
}

.input-group {
  display: flex;
  gap: 20rpx;
}

.input-group input {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #666;
  border: 1px solid #ccc;
}

.dual-picker {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.tier-picker {
  flex: 1;
  position: relative;
}

.tier-picker::after {
  content: "▼";
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.arrow {
  color: #666;
  font-size: 40rpx;
}

.picker {
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #fff;
}

.picker::placeholder {
  color: #999;
}

/* 输入框聚焦样式 */
input:focus {
  border-color: #1ba035;
  box-shadow: 0 0 10rpx rgba(26, 160, 53, 0.1);
}

/* 弹窗样式 */
.popup-content {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
}

.level,
.role {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
}

.level input,
.role input {
  width: 70%;

}

.popup-content .top {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding: 20rpx;
}

.popup-content .body {
  min-height: 1000rpx;
  display: flex;
}

.popup-nav {
  width: 200rpx;
  /* 根据需要调整宽度 */
  border-right: 1px solid #eee;
  padding: 20rpx 0;
}

.nav-item {
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.nav-item.active {
  color: #1ba035;
  font-weight: bold;
  border-left: 4rpx solid #1ba035;
  padding-left: 16rpx;
}

.popup-scroll {
  flex: 1;
}

.popup-group-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
}

.popup-item {
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  text-align: center;
}

.popup-item:last-child {
  border-bottom: none;
}

.popup-item-title {
  font-size: 16px;
  font-weight: 700;
}

.popup-item-body {
  display: flex;
  flex-wrap: wrap;
  padding-top: 20rpx;
}

.popup-item-body .popup-item-body-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  padding: 20rpx;
  border: 1px solid #aaa;
  border-radius: 7px;
  box-sizing: border-box;
  margin-left: 20rpx;
  margin-top: 20rpx;
}

.popup-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 28rpx;
  color: #999;
}

.popup-scroll {
  max-height: 1000rpx;
  overflow-y: auto;
}

.popup-group {
  margin-bottom: 20rpx;
}

.popup-group-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
}

.popup-footer {
  width: 100%;
  text-align: center;
  font-size: 28rpx;
  padding: 20rpx;
  color: #999;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}

.popup-footer2 {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: center;
  font-size: 28rpx;
  color: #999;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
  display: block;
  width: 50%;
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
  box-sizing: border-box;

}

.popup-footer2 .cancel {
  color: #198dda;
}

.popup-footer2 .confirm {
  background-color: #198dda;
  color: #fff;
}

.orderMsg {
  width: 100%;
  display: flex;
  padding: 40rpx;
  box-sizing: border-box;
  margin-bottom: 100rpx;
}

.orderMsg .pay,
.orderMsg .time {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.orderMsg .pay image,
.orderMsg .time image {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.orderMsg .pay .text,
.orderMsg .time .text {
  font-size: 14px;
  font-weight: 700;
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
}

.footer .tip {
  width: 100%;
  font-size: 15px;
  color: #aaa;
  background-color: #eee;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .button {
  width: 100%;
  height: 100rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: skyblue;
}
</style>